<template>

	
	<view class="warp">
		    <view >
      
		<uni-section title="书山有路勤为径，学海无涯苦作舟" type="line"></uni-section>
	<!-- #ifdef MP-QQ -->
    <view class="adContainer">
	<ad  unit-id="49fbbff61639d5c62ace1745f1f019b0" type="feeds"></ad>
    </view>
    <!-- #endif  -->

	<!-- #ifdef MP-WEIXIN  -->
<ad unit-id="adunit-d0afedca1cfb4087" ad-type="video" ad-theme="white"></ad>
    <!-- #endif  -->


		<view class="example-body">
			<uni-grid :column="3" :show-border="false" :square="false" @change="change()">
				<uni-grid-item v-if="index < 9" v-for="(item ,index) in list" :index="index" :key="index">
					<view class="grid-item-box">
						<view :class="item.other" :style="item.value" >	</view>
						<text class="text">{{item.title}}</text>
						<view v-if="item.code" class="grid-dot">
							<uni-badge :type="item.note" />
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
				<!-- #ifdef MP-QQ -->
    <view class="adContainer">
	<ad  unit-id='c2b6e06149d349798bf59a7c14e3e4f7' type="card"></ad>
    </view>
    <!-- #endif  -->


		
		</view>
			<uni-section title="更多实用工具正在开发敬请期待！" type="line"></uni-section>
 </view>
	</view>
</template>

<script>
	export default {
	
		data() {
			return {

				dynamicList: [],
				list:[]
				
			}
		},	onLoad(e){
			let _this=this;
		uni.showLoading({
    title: '加载中'
});
				uni.request({
					url: _this.URLs+ "/api/applets/GetBycode?code=asxsydboke",
					success: resp => {
					
						if (resp.statusCode == 200) {
							_this. list =resp.data.data;
		
							}
				setTimeout(function(){
					uni.hideLoading();
				}, 100);//在此处延迟1秒再执行下一段代码块（调自己）
					},
					fail: (data, code) => {
								uni.hideLoading();
						console.log('fail' + JSON.stringify(data));
					}
				});
	  	
		},
		/**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    qq.showShareMenu({
  showShareItems: ['qq', 'qzone', 'wechatFriends', 'wechatMoment']
})
  }
		
		,
		onReady() {
	       
				},
		methods: {

			change(e) {
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++
				uni.navigateTo({
  				url: '/pages/'+this.list[index].code+'&name='+this.list[index].title,
    			animationType: 'pop-in',
    			animationDuration: 200
				});

			
		
			}
		}
	}
</script>

<style>
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}

	/* #endif */


	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: rgba(255, 255, 255, 0.342);
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}


	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}


	.image {
		width: 50rpx;
		height: 50rpx;
	}

	.text {
		font-size: 26rpx;
		margin-top: 10rpx;
	}


	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;

		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
		background-color: rgba(255, 255, 255, 0.568);
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}
</style>